<template>
    <section>
        <div class="bon-container">
            <div class="header">
                <h4>添加优惠券</h4>
            </div>
            <div class="bon-con">
                <div class="bon-con__title">
                    <span @click="back">
                        <i class="el-icon-arrow-left"></i>返回优惠券列表
                    </span>
                </div>
                <el-form ref="form" :rule="rules" :model="form" label-width="160px">
                    <el-form-item label="优惠券名称" prop="name">
                        <div class="form-box">
                            <el-input placeholder="请输入名称" v-model="form.name"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="面额" prop="money">
                        <div class="form-box">
                            <el-input placeholder="请输入面额" v-model="form.money"></el-input>
                            <span>元</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="使用门槛" prop="min_amount">
                        <div class="form-box">
                            <span>满</span>
                            <el-input placeholder="请输入使用门槛" v-model="form.min_amount"></el-input>
                            <span>元可用</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="有效期" prop="date">
                        <el-date-picker
                                v-model="form.date"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                class="form-box"
                                value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="发行量" prop="publish_number">
                        <div class="form-box">
                            <el-input placeholder="请输入发行量" v-model="form.publish_number"></el-input>
                            <span>张</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="领取资格" prop="get_qualification">
                        <el-radio-group v-model="form.get_qualification">
                            <el-radio :label="1">所有用户</el-radio>
                            <el-radio :label="0">新用户</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="每人限领数量" prop="limit_number">
                        <div class="form-box">
                            <el-input placeholder="请输入每人限领数量" v-model="form.limit_number"></el-input>
                            <span>张</span>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div class="form-box">
                            <el-button type="primary" @click="onSubmit('form')">保存</el-button>
                            <el-button @click="resetForm('form')">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </section>
</template>

<script>
    import FormRow from '../../components/basic/FlowRow.vue';
    import BonuseCategory from '../../components/basic/BonuseCategory.vue';
    import UserList from '../../components/basic/UserList.vue'

    export default {
        components: {
            FormRow,
            BonuseCategory,
            UserList
        },
        data() {
            return {
                date: '',
                form: {},
                rules: {
                    name: [
                        { required: true, message: '请输入优惠券名称', trigger: 'blur' }
                    ],
                    money: [
                        { required: true, message: '请填写面额', trigger: 'blur' }
                    ],
                    min_amount:[
                        { required: true, message: '请填写使用门槛', trigger: 'blur' }
                    ],
                    date: [
                        { type: 'date', required: true, message: '请选择使用日期', trigger: 'change' }
                    ],
                    publish_number:[
                        { required: true, message: '请填写发行量', trigger: 'blur' }
                    ],
                    get_qualification: [
                        { required: true, message: '请选择领取资格', trigger: 'change' }
                    ],
                    limit_number: [
                        { required: true, message: '请填写每人限领数量', trigger: 'blur' }
                    ]
                }
            }
        },
        mounted() {

        },
        methods: {
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            back() {
                this.$router.go(-1);
            },
            onSubmit(formName) {
                console.log('提交数据', this.form)

                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.$confirm('请确认分发给用户优惠券的信息?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        })
                            // .then(() => this.validate(this.form))
                            .then(() => this.postData())
                            .then(() => {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                });
                                this.resetForm('form');
                            })
                            .catch(err => {
                                if (err !== 'cancel') {
                                    this.$message({
                                        type: 'error',
                                        message: `添加失败 ${err}`
                                    });
                                }
                            });
                    } else {
                        return false;
                    }
                });
            },
            genData(data) {
                console.log(
                    {
                        name: data.name,
                        money:data.money,
                        min_amount:data.min_amount,
                        limit_number:data.limit_number,
                        use_start_date: data.date[0],
                        use_end_date: data.date[1],
                        get_qualification:data.get_qualification,
                        publish_number:data.publish_number
                    }
                )
                return {
                    name: data.name,
                    money:data.money,
                    min_amount:data.min_amount,
                    limit_number:data.limit_number,
                    use_start_date: data.date[0],
                    use_end_date: data.date[1],
                    get_qualification:data.get_qualification,
                    publish_number:data.publish_number
                };
            },
            postData() {
                return axios
                    .post('admin_bonus_categories', this.genData(this.form))
                    .then(res => {
                        console.log('提交', res)
                        return res.data.status === 1 ? Promise.resolve() : Promise.reject(res.data.msg);
                    });
            }

        }
    }
</script>
<style scoped>
    .bon-container {
        min-height: calc(100vh - 92px);
    }

    .flex-box {
        display: flex;
    }

    .header {
        padding: 10px;

        background: #FFFFFF;
    }

    .bon-con {
        min-height: 100vh;
        margin: 10px;
        padding: 20px;
        background: #FFFFFF;
    }

    .bon-con__title {
        padding: 0 20px 20px 0;
        border-bottom: 1px dashed #D8D8D8;
    }

    .bon-con__title > span {
        color: #3984F9;
        cursor: pointer;
    }

    .form-box {
        margin-left: 20px;
    }
</style>
<style>
    .el-form {
        padding-top: 40px;
    }

    .el-input {
        width: 280px;
    }
</style>